<template>
  <div class="myConstruct">
    <button class="constructStyle" style="margin-left: 20px;margin-top: 20px" @click="showDialog = true">建造</button>
    <button class="destroyStyle" style="margin-left: 60px;margin-bottom: 20px" @click="destroyByIds">批量销毁</button>
    <span class="cardStyle" style="width: 200px;height: 40px;margin-left: 60px">
      <i class="el-icon-search" style="color: #D3DCE6;font-size: 30px"></i>
      <select @keyup.enter.native="load" class="selectStyle" v-model="selectValue" style="width: 200px;height: 40px;margin-left: 30px">
        <option value="">请选择标签</option>
        <option value="卧室">卧室</option>
        <option value="训练场">训练场</option>
        <option value="农场">农场</option>
        <option value="医护室">医护室</option>
        <option value="维修站">维修站</option>
        <option value="交易所">交易所</option>
      </select>
      <button class="searchStyle" style="margin-left: 60px" @click="search">搜索</button>
      <button class="resetStyle" style="margin-left: 60px" @click="reset">重置</button>
    </span>
    <el-dialog :visible.sync="showDialog" title="建造系统"
               class="storeStyle1"
               style="width: 120%;
               position: absolute;
        left: -150px"
    >
      <el-table :data="storeData"  style="align: center;font-size: 20px">
        <el-table-column
          prop="type"
          label="标签"
          width="130"
        >
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper" style="font-size: 20px">
              <span :style="chooseType(scope.row.type)">{{scope.row.type}}</span>
            </div>
          </template>

        </el-table-column>
        <el-table-column prop="hp" label="生命值" width="120">
        </el-table-column>
        <el-table-column prop="prosperity" label="繁荣度" width="120">
        </el-table-column>
        <el-table-column prop="food_prod" label="食物产出" width="120">
        </el-table-column>
        <el-table-column prop="money_prod" label="金钱产出" width="120">
        </el-table-column>
        <el-table-column prop="cost" label="建筑消耗" width="120">
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="slot">
            <button class="jianzao" @click="construct(slot.row)">建造</button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-table :data="tableData" @selection-change="handleSelect" style="align: center;line-height: 50px;opacity: 0.6">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column prop="id" label="编号" width="120">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="nickname"
        label="标签"
        width="120"
      >
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper" style="font-size: 20px">
            <span :style="chooseType(scope.row.type)">{{scope.row.type}}</span>
          </div>
        </template>

      </el-table-column>
      <el-table-column prop="hp" label="生命值" width="160">
      </el-table-column>
      <el-table-column prop="prosperity" label="繁荣度" width="160">
      </el-table-column>
      <el-table-column prop="food_prod" label="食物产出" width="160">
      </el-table-column>
      <el-table-column prop="money_prod" label="金钱产出" width="160">
      </el-table-column>
      <el-table-column prop="cost" label="建筑消耗" width="160">
      </el-table-column>
      <el-table-column label="操作" width="140">
        <template slot-scope="slot">
          <button class="gradient-button-2" @click="destroy(slot.row.id)">销毁</button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "Construct",
  data(){
    return{
      showDialog: false,
      selectIds: [],
      selectValue: '',
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      storeData: [
        {
          id: '1',
          type: '卧室',
          hp: 500,
          prosperity: 2,
          food_prod: -2,
          money_prod: -1,
          cost: 2
        },
        {
          id: '2',
          type: '训练场',
          hp: 700,
          prosperity: 3,
          food_prod: -2,
          money_prod: -3,
          cost: 3
        },
        {
          id: '3',
          type: '农场',
          hp: 400,
          prosperity: 2,
          food_prod: 5,
          money_prod: 3,
          cost: 2
        },
        {
          id: '4',
          type: '医护室',
          hp: 600,
          prosperity: 4,
          food_prod: -2,
          money_prod: -4,
          cost: 4
        },
        {
          id: '5',
          type: '维修站',
          hp: 650,
          prosperity: 4,
          food_prod: -1,
          money_prod: -6,
          cost: 4
        },
        {
          id: '6',
          type: '交易所',
          hp: 550,
          prosperity: 5,
          food_prod: 0,
          money_prod: 6,
          cost: 5
        }
      ],
    }
  },
  created() {
    this.load()
  },
  methods:{
    load() {
      this.axios.get(this.BASE_URL + "/construct/page",{
        params:{
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.selectValue
        }
      }).then(res => {
        this.tableData = res.data.data.data
        this.total = res.data.data.total
        console.log(res.data)
      })
    },
    search(){
      this.load()
    },
    reset(){
      this.selectValue = ''
      this.load()
    },
    construct(construct){
      this.axios.post(this.BASE_URL + "/construct/jianzao", construct).then(res => {
        if (res.data.code === '200') {
          this.$message.success("建造成功")
          this.load()
        } else {
          this.$message.error("建造失败")
        }
      })
    },
    handleSelect(selection){
      this.selectIds = selection.map(item => item.id)
    },
    destroyByIds(){
      if(this.selectIds.length == 0)return this.$message.error("未选择任何建筑，操作失败")
      this.$confirm('你确定要删除选中的所有角色吗？此操作将永久删除角色', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.axios.post(this.BASE_URL + '/construct/destroy', this.selectIds).then(res => {
          if (res.data.code === '200') {
            this.$message({
              type: 'success',
              message: '销毁选中建筑成功!'
            });
            this.load()
          } else {
            this.$message.error("销毁失败:" + res.data.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    destroy(id){
      const ids = Array.of(id)
      console.log(id)
      this.$confirm('此操作将永久销毁该建筑, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.axios.post(this.BASE_URL + '/construct/destroy',ids).then(res => {
          if (res.data.code === '200') {
            this.$message({
              type: 'success',
              message: '销毁成功!'
            });
            this.load()
          } else {
            this.$message.error("销毁失败:" + res.data.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    chooseType(name){
      if(name == '卧室')return 'background: orange'
      else if(name == '训练场')return 'background: #97694F;color: #40E0D0'
      else if(name == '农场')return 'background: #007FFF;color: #7FFF00'
      else if(name == '医护室')return 'background: #BC1717;color: #D9D9F3'
      else if(name == '维修站')return 'background: yellow;color: #97694F'
      else if(name == '交易所')return 'background: #70DBDB;color: #426F42'
    },
    handleSizeChange(pageSize) {
      console.log(`每页 ${pageSize} 条`);
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log(`当前页: ${pageNum}`);
      this.pageNum = pageNum
      this.load()
    }
  }
}
</script>

<style scoped>
@import "../css/cssStyle.css";
</style>
